import { Button, Form, Input, Space } from "antd";

interface ConfigType {
  type: string;
  name: string;
  placeholder: string;
  label: string;
}

interface PropsType {
  handleSearch: (values: any) => void;
  handleReset: () => void;
  searchConfig: ConfigType[];
}

const CostomSearch: React.FC<PropsType> = ({
  handleSearch,
  handleReset,
  searchConfig,
}) => {
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    console.log(values);
    handleSearch(values);
  };
  const reset = () => {
    form.resetFields();
    handleReset();
  };
  return (
    <div style={{ marginBottom: 20 }}>
      <Form layout="inline" form={form} onFinish={onFinish}>
        {searchConfig.map((v, i) => {
          return (
            <Form.Item key={i} name={v.name} label={v.label}>
              <Input type={v.type} placeholder={v.placeholder}></Input>
            </Form.Item>
          );
        })}
        {/* <Form.Item label="搜索" name="searchValue">
          <Input placeholder="请输入搜索的内容"></Input>
        </Form.Item>
        <Form.Item label="类型" name="type">
          <Input placeholder="请输入搜索类型"></Input>
        </Form.Item>
        <Form.Item label="最小分数" name="minScore">
          <Input placeholder="请输入搜索的最小分数"></Input>
        </Form.Item>
        <Form.Item label="最大分数" name="maxScore">
          <Input placeholder="请输入搜索的最大分数"></Input>
        </Form.Item> */}
        <Form.Item>
          <Space>
            <Button htmlType="submit" type="primary">
              搜索
            </Button>
            <Button onClick={() => reset()}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

export default CostomSearch;
